<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通用后台管理系统</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
  <script src="/static/layui/layui.js"></script>
  <style>
    /* 适配多设备 */
    @media screen and (max-width: 768px) {
      .site-tree-mobile {
        display: block !important;
        position: fixed;
        z-index: 16666669;
        bottom: 15px;
        left: 15px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 2px;
        text-align: center;
        background-color: #009688;
        color: #fff;
      }

      .site-mobile .site-tree-mobile {
        display: none !important;
      }

      .site-mobile .site-mobile-shade {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .8);
        z-index: 999;
      }

      .site-tree-mobile i {
        font-size: 20px;
      }

      .layui-layout-admin .layui-side {
        position: fixed;
        top: 0;
        left: -260px;
        transition: all .3s;
        -webkit-transition: all .3s;
        z-index: 10000;
      }

      .layui-body {
        position: static;
        bottom: 0;
        left: 0;
      }

      .site-mobile .layui-side {
        left: 0;
      }

      .site-mobile .layui-side-child {
        top: 50%;
        left: 200px;
        height: 300px;
        margin-top: -100px;
      }

      .layui-layout-admin .layui-footer {
        position: static;
        height: auto;
        padding: 15px 0;
        line-height: 30px;
      }

      .layui-layout-admin .layui-footer p {
        height: auto;
        padding-right: 0;
      }
    }

    /* 主体框架 */
    .main-iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo">通用后台管理系统</div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <!-- <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item"><a href="">nav 1</a></li>
        <li class="layui-nav-item"><a href="">nav 2</a></li>
        <li class="layui-nav-item"><a href="">nav 3</a></li>
        <li class="layui-nav-item">
          <a href="javascript:;">nav groups</a>
          <dl class="layui-nav-child">
            <dd><a href="">menu 11</a></dd>
            <dd><a href="">menu 22</a></dd>
            <dd><a href="">menu 33</a></dd>
          </dl>
        </li>
      </ul> -->
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href="javascript:;">
            @if ($admin->avatar)
            <img src="{{$admin->avatar}}" alt="avatar" class="layui-nav-img">
            @endif
            {{$admin->username}}
          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="edit()">修改资料</a></dd>
            <dd><a href="javascript:;" onclick="clear_cache()">清除缓存</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;" onclick="logout()">登出</a></li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        @if($menus)
        <ul class="layui-nav layui-nav-tree" lay-filter="side-menu">
          {!!$menus!!}
        </ul>
        @endif
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <iframe class="main-iframe" src="/admins/home/welcome" scrolling="yes"></iframe>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->
      底部固定区域
    </div>
  </div>

  <script>
    //JavaScript代码区域
    layui.use('element', function() {
      var element = layui.element,
        $ = layui.jquery;
      // 响应式
      $(".site-tree-mobile").click(function() {
        $("body").addClass("site-mobile");
        $(".site-mobile-shade").click(function() {
          $("body").removeClass("site-mobile");
        });
      });
    });

    // 点击菜单
    function firemenu(obj) {
      let $ = layui.jquery,
        controller = $(obj).attr('controller'),
        action = $(obj).attr('action'),
        url = '/admins/' + controller + '/' + action;
      $('.main-iframe').attr('src', url.toLowerCase());
    }

    // 修改资料
    function edit() {
      layer.open({
        type: 2,
        title: '修改资料',
        shadeClose: true,
        shade: 0.3,
        area: ['420px', '450px'],
        content: '/admins/admin/edit?id={{$admin->id}}' //iframe的url
      });
    }

    // 清除缓存
    function clear_cache() {
      let $ = layui.jquery;
      $.get('/admins/admin/clear', {}, function(res){
        if (res.code === 0) {
          layer.alert(res.msg, {
            icon: 1
          }, function() {
            window.location.reload();
          });
        }
      }, 'json');
    }

    // 退出登录
    function logout() {
      let $ = layui.jquery;
      $.get('/admins/account/logout', {}, function(res) {
        if (res.code === 0) {
          layer.alert(res.msg, {
            icon: 1
          }, function() {
            window.location.href = '/admins/account/login';
          });
        }
      }, 'json')
    }
  </script>

  <!-- 响应式 -->
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon layui-icon-spread-left"></i>
  </div>
  <div class="site-mobile-shade"></div>

</body>

</html>